<template>
  <!-- 2 lx资源列表 -->
  <div>
    <div class="breadcrumb">
      <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
    </div>

    <div class="con_container">
      <el-table
        class="content"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        :border="true"
        default-expand-all
      >
        <el-table-column prop="id" label="编号" width="70" />
        <el-table-column prop="name" label="资源名称" width="320" />
        <el-table-column prop="url" label="资源路径" width="320" />
        <el-table-column prop="description" label="描述" width="320"
          >\</el-table-column
        >
        <el-table-column prop="createTime" label="添加时间">
          <template #default="scope">
            <div>
              {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 5, 10, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import * as api from "../../request/api";
// import Breadcrumb from '../../components/breadcrumb.vue'
// import Table from '../../components/Table.vue'
import useTable from "../../hooks/useTables";
import dayjs from "dayjs";
let msg = ref("资源列表");
let txt = ref("权限");
let path1 = ref("ums/admin");
let aaa = ref(0);

let {
  getTableData,
  tableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable(api.admin.resourceListApi); //给table组件传请求数据,传prop??
getTableData();
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

.content {
  padding: 30px 20px;
  font-size: 14px;
}

.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}
.con_container {
  padding: 10px 20px !important;
  margin-top: 20px;
}
:deep .el-table .el-table__cell {
  text-align: center !important;
}
:deep .el-table thead {
  font-weight: bold !important;
}
</style>
